<!--
 * @Author: Liz.Zheng
 * @Date: 2022-01-05 13:31:58
 * @LastEditTime: 2023-02-15 17:42:48
 * @LastEditors: 郑亚莉 zhengyali@shequ.life
 * @Description: iframe页面
 * @Motto: Write the code. Change the world.
-->
<template>
  <div class="iframe-box">
    <iframe
      ref="iframeRef"
      :src="url"
      class="iframe"
      frameborder="no"
      border="0"
      marginWidth="0"
      marginHeight="0"
    ></iframe>
  </div>
</template>

<script>
import {defineComponent, watch, ref, nextTick, reactive, toRefs, computed} from "vue";
import utils from '../../common/utils/utils';
import store from "@/store";
import { t } from "@/locale";
import {
  LeftOutlined,
  RightOutlined,
  ReloadOutlined,
} from "@ant-design/icons-vue";
import { useRoute, useRouter } from "vue-router";

export default defineComponent({
  name: "Iframes",
  components: {},
  props: {
    currentKey: '',
  },
  setup(props, { emit }) {
    const route = useRoute();
    const router = useRouter();

    //   iframe实例
    const iframeRef = ref(null);

    const state = reactive({
      url: '',
    });


    // 与iframe通信
    const postMessage = () => {
      const data = {
        type: "mainMessage",
        from: "org",
        token: utils.getStorage("org_token"),
      };
      data.buildingInfo = JSON.stringify(store.getters.buildingInfo);
      data.userInfo = JSON.stringify(store.getters.userInfo);
      data.basicConfig = JSON.stringify(store.getters.basicConfig);
      data.tableConfig = JSON.stringify(store.getters.tableConfig);
      if (props.content.app_url.indexOf("?") != -1) {
        const paramsStr = props.content.app_url.split("?")[1];
        const paramsArr = paramsStr.split("&");
        let queryObj = {};
        for (let item of paramsArr) {
          const arr = item.split("=");
          queryObj[arr[0]] = arr[1];
        }
        data.query = queryObj;
      }
      iframeRef.value.contentWindow.postMessage(data, "*");
    };
    const getMessage = () => {


    };
    const postRouteMessage = (type) => {

    };
    const iframeMenus = computed(() => store.getters.iframeMenus);

    const changeSrc = (val) => {
      if (val) {
        let current = iframeMenus.value.find((v) => v.arrKey == val);
        if (current) {
          state.url = current.alias;
        }
      }
    }

    watch(() => props.currentKey, (val) => {
      changeSrc(val);
    }, { immediate: true });

    const init = () => {
      changeSrc(route?.query.key);
    }

    init();


    return {
      iframeRef,
      ...toRefs(state),
      postRouteMessage,
    };
  },
});
</script>

<style lang="less" scoped>
.iframe-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;

  .iframe {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
}
</style>
